// vuex基础1，2代码



import { createStore } from 'vuex'

// vuex基础2-分模块用法时的代码
// modules (分模块)
// 存在两种情况
// 默认的模块，state 区分模块，其他 getters mutations actions 都在全局。
// 带命名空间 namespaced: true 的模块，所有功能区分模块，更高封装度和复用。
const muduleA = {
    // state 区分模块，其他的不能区分所以要加这条代码
    namespaced: true,
    // 可以用一个对象，用一个函数来写（这里用的是函数）
    state: () => {
        return {
            username: '模块a'
        }
    },
    getters: {
        changename(state) {
            return state.username + "!!!"
        }
    }
}
const muduleB = {
    namespaced: true,
    state: () => {
        return {
            username: '模块b'
        }
    },
    getters: {
        changename(state) {
            // console.log(state);
            return state.username + "@@@"
        }
    },
    mutations: {
        // 改变数据
        editname(state) {
            state.username = 'lisi'
        }
    },
    actions: {
        // 请求数据函数
        updatename(ctx) {
            // 发请求
            setTimeout(() => {
                ctx.commit('editname')
            }, 3000);
        }
    },
}
export default createStore({
    modules: {
        // 分模块
        a: muduleA,
        b: muduleB,
    }
})



// vuex基础-跟模块用法时的代码
//vue2.0 创建仓库 new Vuex.Store({})
//vue3.0 创建仓库 createStore({})
// 创建vuex仓库并导出
// export default createStore({
//     state: {
//         // 定义数据
//         username: 'zhangsan'
//     },
//     mutations: {
//         // 改变数据
//         editname(state) {
//             // console.log(state);
//             state.username = 'lisi'
//         }

//     },
//     actions: {
//         // 请求数据函数
//         // ctx是自定义名
//         updatename(ctx) {
//             // 发请求
//             setTimeout(() => {
//                 // console.log(ctx);
//                 ctx.commit('editname')
//             }, 3000);
//         }

//     },
//     modules: {
//         // 分模块

//     },
//     getters: {
//         // vuex的计算属性
//         newname(state) {
//             // console.log(state);
//             return state.username + '你好'
//         }
//     },
// })